<template lang="pug">
.edit
  .edit-warp
    el-form.edit-container(
      :model="form"
      :rules="formRules"
      ref="editForm"
      size="small"
      label-width="150px"
    )
      .edit-header
        el-button(icon="el-icon-arrow-left" size="small" name="back" @click="$router.back()") 返回
        .edit-header-title 编辑信息
      .edit-section
        .edit-section-title 基本信息
        .edit-section-body
          el-form-item(label="供应商名称：" prop="companyName")
            el-input(placeholder="请输入供应商名称" v-model="form.companyName")
          el-form-item(label="登录账号：" prop="userName")
            el-input(placeholder="请输入登录账号" v-model="form.userName")
          el-form-item(label="公司性质：" prop="companyType")
            el-select(placeholder="请选择公司性质" v-model="form.companyType")
              el-option(label="国企", :value="1")
              el-option(label="股份制", :value="2")
              el-option(label="私企/集体", :value="3")
              el-option(label="中外合资", :value="4")
              el-option(label="外商独资", :value="5")
              el-option(label="其他" value="6")
          el-form-item(label="主营产品：" prop="mainBusinessList")
            el-select(placeholder="请选择主营产品" multiple filterable v-model="form.mainBusinessList")
              el-option(v-for="item in categorys", :label="item.name", :value="item.id")
          el-form-item(label="擅长业态：" prop="styleList")
            el-select(placeholder="请选择擅长业态" multiple filterable v-model="form.styleList")
              el-option(v-for="item in styles", :label="item.styleName", :value="item.styleId")
          el-form-item(label="联系人：" prop="personsInChargeOfCompany")
            el-input(placeholder="请输入联系人" v-model="form.personsInChargeOfCompany")
          el-form-item(label="电话号码：" prop="personsInChargeOfCompanyPhone")
            el-input(placeholder="请输入电话号码" v-model="form.personsInChargeOfCompanyPhone")
          el-form-item(label="公司固话：" prop="telephone")
            el-input(placeholder="请输入公司固话" v-model="form.telephone")
          el-form-item(label="联系地址：" required)
            .el-form-bd.el-form-address
              el-select(v-model="countries" size="small")
                el-option(label="中国", value="1") 中国
              el-select(v-model="form.province" size="small" @change="changeProvince")
                el-option(v-for="item in provinces", :label="item.name", :value="item.id") {{item.name}}
              el-select(v-model="form.city" size="small")
                el-option(v-for="item in citys", :label="item.name", :value="item.id") {{item.name}}
            .el-form-address-detail
              el-input(placeholder="请输入联系地址" v-model="form.detailAddress")
          el-form-item(label="公司邮箱：")
            el-input(placeholder="请输入公司邮箱" v-model="form.companyMail")
          el-form-item(label="公司传真：")
            el-input(placeholder="请输入公司传真" v-model="form.companyFax")
          el-form-item(label="公司网址：")
            el-input(placeholder="请输入公司网址" v-model="form.companyUrl")
          el-form-item(label="注册资金：")
            el-input(placeholder="请输入注册资金" v-model="form.registeredFund")
          el-form-item(label="公司人数：")
            el-input(placeholder="请输入公司人数" v-model="form.staffAmount")
          el-form-item(label="工厂面积：")
            el-input(placeholder="请输入工厂面积" v-model="form.factoryArea")
      .edit-section
        .edit-section-title 业务信息
        .edit-section-body(v-for="item, index in form.personsContactList")
          .edit-section-close(@click="deleteMember(item, index)")
            .iconfont.el-icon-circle-close
          el-form-item(label="销售负责人：" required)
            el-input(placeholder="请输入销售负责人" v-model="item.name")
          el-form-item(label="销售负责人电话：" required)
            el-input(placeholder="请输入销售负责人电话" v-model="item.mobile")
          el-form-item(label="销售负责人邮箱：" required)
            el-input(placeholder="请输入销售负责人邮箱" v-model="item.mail")
        .edit-section-handle
          el-button(type="primary" size="small" @click="addPerson") 添加人员
      .edit-section
        .edit-section-title 证件信息
        .edit-section-body
          el-form-item(label="营业执照号：" prop="businessLicenseRegistrationNumbe")
            el-input(placeholder="请输入营业执照号" v-model="form.businessLicenseRegistrationNumbe")
          el-form-item(label="营业执照：" required)
            .el-form-info 仅允许上传一张图片，文件大小≤5MB
            .el-form-bd
              el-upload(
                action="#"
                class="upload-demo"
                :multiple="false"
                accept="image/png, image/jpeg, image/jpg"
                ref="hiddenUpload1"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="handleBusinessChange"
                list-type="picture-card"
              )
                .el-upload-btn(slot="trigger")
                  .iconfont.el-icon-plus
                  .el-upload-btn-txt 点击上传
              .el-form-file(v-if="businessFiles.length")
                .el-form-img(v-for="item, index in businessFiles", :style="{'background-image':`url(${item.url})`}")
                  .iconfont.el-icon-error(@click="delFiles('businessFiles', index)")
              .el-form-file(v-if="form.manufacturerBusinessLicenseUrl")
                .el-form-img(:style="{'background-image':`url(${form.manufacturerBusinessLicenseUrl})`}")
                  .iconfont.el-icon-error(@click="delBusiness")
          el-form-item(label="公司logo：" required)
            .el-form-info 仅允许上传一张图片，文件大小≤5MB
            .el-form-bd
              el-upload(
                action="#"
                class="upload-demo"
                :multiple="false"
                accept="image/png, image/jpeg, image/jpg"
                ref="hiddenUpload2"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="handleLogoChange"
                list-type="picture-card"
              )
                .el-upload-btn(slot="trigger")
                  .iconfont.el-icon-plus
                  .el-upload-btn-txt 点击上传
              .el-form-file(v-if="logoFiles.length")
                .el-form-img(v-for="item, index in logoFiles", :style="{'background-image':`url(${item.url})`}")
                  .iconfont.el-icon-error(@click="delFiles('logoFiles', index)")
              .el-form-file(v-if="form.companyLogoUrl")
                .el-form-img(:style="{'background-image':`url(${form.companyLogoUrl})`}")
                  .iconfont.el-icon-error(@click="delLogoUrl")
          el-form-item(label="其他证书：" required)
            .el-form-info 文件大小≤5MB
            .el-form-bd
              el-upload(
                action="#"
                class="upload-demo"
                :multiple="true"
                accept="image/png, image/jpeg, image/jpg"
                ref="hiddenUpload3"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="handleCertificateChange"
                list-type="picture-card"
              )
                .el-upload-btn(slot="trigger")
                  .iconfont.el-icon-plus
                  .el-upload-btn-txt 点击上传
              .el-form-file(v-if="form.supplierQualificationList.length")
                .el-form-img(v-for="item, index in form.supplierQualificationList", :style="{'background-image':`url(${item.qualificationFileUrl})`}")
                  .iconfont.el-icon-error(@click="delCertificate(index)")
              .el-form-file(v-if="certificateFiles.length")
                .el-form-img(v-for="item, index in certificateFiles", :style="{'background-image':`url(${item.url})`}")
                  .iconfont.el-icon-error(@click="delFiles('certificateFiles', index)")
      .edit-section
        .edit-section-title 公司简介
        .edit-section-body.edit-section-quill
          quill-editor(
            ref="myQuillEditor"
            v-model="form.companyProfile"
            :options="editorOption" 
          )
  .edit-hidden-upload(v-show="false")
    el-upload(
      action="#"
      class="upload-demo"
      :multiple="true"
      accept="image/png, image/jpeg, image/jpg"
      ref="hiddenUpload"
      :show-file-list="false"
      :auto-upload="false"
      :on-change="handleQuillChange"
    )
      el-button(size="small" name="primary" slot="trigger") 上传图片
  .edit-footer
    el-button(size="small") 取消
    el-button(type="primary" size="small" @click="save") 保存
</template>

<script>
import Quill from 'quill'
import { getFirstCategory, getStyles, getAddres, getSupplierCompanyById, saveSupplierCompany, FileUpload, saveFileManage } from 'api'
export default {
  name: 'editInfo',
  data () {
    var validatePhoto = (rule, value, callback) => {
      if (!value.length) {
        callback(new Error('请上传其他证书'))
      }
    }
    return {
      editorOption: {
        placeholder: '请输入自定义内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ script: 'sub' }, { script: 'super' }],
            [{ indent: '-1' }, { indent: '+1' }],
            [{ direction: 'rtl' }],
            [{ size: ['small', false, 'large', 'huge' ] }],
            [{ header: [1, 2, 3, 4, false] }],
            [{ color: [] }, { background: [] }],
            [{ font: [] }],
            [{ align: [] }],
            ['image'],
            ['clear']
          ]
        }
      },
      countries: '1',
      form: {
        companyName: '',
        userName: '',
        companyType: '',
        mainBusinessList: [],
        styleList: [],
        personsInChargeOfCompany: '',
        personsInChargeOfCompanyPhone: '',
        telephone: '',
        province: '',
        city: '',
        detailAddress: '',
        companyMail: '',
        companyUrl: '',
        companyFax: '',
        personsContactList: [
          {
            mobile: '',
            mail: '',
            name: ''
          }
        ],
        registeredFund: '',
        staffAmount: '',
        factoryArea: '',
        headOfSales: '',
        headOfSalesMail: '',
        headOfSalesPhone: '',
        supplierQualificationList: [],
        companyProfile: '',
        companyLogo: '',
        companyLogoUrl: '',
        manufacturerBusinessLicenseUrl: '',
        businessLicenseRegistrationNumbe: ''
      },
      formRules: {
        companyName: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入登录账号', trigger: 'blur' }
        ],
        companyType: [
          { required: true, message: '请选择公司性质', trigger: 'change' }
        ],
        mainBusinessList: [
          { type: 'array', required: true, message: '请选择主营品类', trigger: 'change' }
        ],
        styleList: [
          { type: 'array', required: true, message: '请选择擅长业态', trigger: 'change' }
        ],
        personsInChargeOfCompany: [
          { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        personsInChargeOfCompanyPhone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/, message: '手机号格式错误', trigger: 'blur' }
        ],
        telephone: [
          { required: true, message: '请输入固定电话', trigger: 'blur' },
          { pattern: /0\d{2,3}-\d{7,8}/, message: '固定电话格式错误', trigger: 'blur' }
        ],
        // province: [
        //   { required: true }
        // ],
        headOfSales: [
          { required: true, message: '请输入销售负责人', trigger: 'blur' }
        ],
        headOfSalesPhone: [
          { required: true, message: '请输入销售负责人电话', trigger: 'blur' },
          { pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/, message: '手机号格式错误', trigger: 'blur' }
        ],
        headOfSalesMail: [
          { required: true, message: '请输入销售负责人邮箱', trigger: 'blur' },
          { pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/, message: '邮箱格式错误', trigger: 'blur' }
        ],
        businessLicenseRegistrationNumbe: [
          { required: true, message: '请输入营业执照号', trigger: 'blur' }
        ],
        // manufacturerBusinessLicenseUrl: [
        //   { required: true, message: '请上传营业执照', trigger: 'blur' }
        // ],
        // companyLogoUrl: [
        //   { required: true, message: '请上传公司logo', trigger: 'blur' }
        // ],
        // supplierQualificationList: [
        //   { type: 'array', required: true, validator: validatePhoto, trigger: 'change' }
        // ]
      },
      categorys: [],
      activeStyles: [],
      styles: [],
      provinces: [],
      citys: [],
      businessFiles: [],
      logoFiles: [],
      certificateFiles: []
    }
  },
  computed: {
    limit: {
      get () {
        // return 5 - this.form.banner.length ? 5 - this.form.banner.length : -1
        return 5
      }
    },
  },
  methods: {
    deleteMember (item, index) {
      console.log(index)
      this.form.personsContactList.splice(index, 1)
    },
    // 获取地址
    async getAddress ({ type, id = 0 }) {
      try {
        const { ResultSet } = await this.$axios.post(getAddres, { content: { id } })
        this[type] = ResultSet.userData.getAddreList
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    // 获取主营业务
    async getFirstCategory () {
      try {
        const { ResultSet } = await this.$axios.post(getFirstCategory)
        this.categorys = ResultSet.userData.firstCategory
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    // 获取业态
    async getStyles () {
      try {
        const { ResultSet } = await this.$axios.post(getStyles)
        this.styles = ResultSet.userData.businessStyles
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    filterFileSize (size) {
      return new Promise((resolve, reject) => {
        const defaultSize = 5 //MB
        if (size <= 5 * 1024 * 1024) {
          resolve(true)
        } else {
          resolve(false)
        }
      })
    },
    async handleBusinessChange (file, fileList) {
      const valid = await this.filterFileSize(file.size)
      if (!valid) {
        let index = fileList.findIndex(item => item.uid === file.uid)
        fileList.splice(index, 1)
        this.$message.error('图片大小≤5MB！')
        return
      }
      this.form.manufacturerBusinessLicenseUrl = ''
      this.form.manufacturerBusinessLicense = ''
      this.businessFiles = [ file ]
    },
    delBusiness () {
      this.form.manufacturerBusinessLicenseUrl = ''
      this.form.manufacturerBusinessLicense = ''
    },
    async handleCertificateChange (file, fileList) {
      const valid = await this.filterFileSize(file.size)
      if (!valid) {
        let index = fileList.findIndex(item => item.uid === file.uid)
        fileList.splice(index, 1)
        this.$message.error('图片大小≤5MB！')
        return
      }
      this.certificateFiles = fileList
    },
    addPerson () {
      if (this.form.personsContactList.length >= 5) {
        this.$message.error('业务人员最对只能添加5个！')
        return
      }
      this.form.personsContactList.push({
        mobile: '',
        mail: '',
        name: ''
      })
    },
    delCertificate (index) {
      this.form.supplierQualificationList.splice('index', 1)
    },
    async handleLogoChange (file, fileList) {
      const valid = await this.filterFileSize(file.size)
      if (!valid) {
        let index = fileList.findIndex(item => item.uid === file.uid)
        fileList.splice(index, 1)
        this.$message.error('图片大小≤5MB！')
        return
      }
      this.form.companyLogo = ''
      this.form.companyLogoUrl = ''
      this.logoFiles = [ file ]
    },
    delLogoUrl () {
      this.form.companyLogo = ''
      this.form.companyLogoUrl = ''
    },
    delFiles (key, index) {
      this[key].splice(index, 1)
    },
    changeProvince (value) {
      this.form.city = ''
      this.getAddress({ type: 'citys', id: value })
    },
    // 点击图片ICON触发事件
    imgHandler(state) {
      this.addRange = this.$refs.myQuillEditor.quill.getSelection()
      if (state) {
        this.$refs.hiddenUpload.$children[0].$refs.input.click()
      }
      this.uploadType = 'image'
    },
    async fileUpload (raw) {
      return new Promise(async (resolve, reject) => {
        try {
          let formData = new FormData()
          formData.append('Filedata', raw)
          formData.append("applicationId", 4)
          const { ResultSet } = await this.$axios.post(FileUpload, { formData: formData, isUpload: true }, { headers:{ "Content-Type": "multipart/form-data" } })
          resolve({ ...ResultSet.Result[0] })
        } catch (err) {
          console.log(err)
          reject(err)
        }
      })
    },
    // 富文本图片上传
    async handleQuillChange (file, fileList) {
      try {
        let host = window.location.protocol === 'https' || window.location.hostname === 'ms.henyouliao.cn' ? 'https://ja-material-formal.oss-cn-shenzhen.aliyuncs.com' : 'https://ja-material-test.oss-cn-shenzhen.aliyuncs.com'
        let fileObj = await this.fileUpload(file.raw)
        this.$refs.myQuillEditor.quill.insertEmbed(this.addRange !== null ? this.addRange.index : 0, this.uploadType, `${host}${fileObj.fileUrl}`, Quill.sources.USER)
        this.$refs.hiddenUpload.clearFiles()
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    // 获取详情
    async getDetail () {
      try {
        const { ResultSet } = await this.$axios.post(getSupplierCompanyById)
        if (ResultSet.userData.result.province) this.getAddress({ type: 'citys', id: ResultSet.userData.result.province })
        if (!ResultSet.userData.result.personsContactList || !ResultSet.userData.result.personsContactList.length) {
          ResultSet.userData.result.personsContactList = [
            {
              mobile: '',
              mail: '',
              name: ''
            }
          ]
        }
        this.form = { ...this.form, ...ResultSet.userData.result, companyType: ResultSet.userData.result.companyType + '' }
        this.form.styleList = this.form.styleList.map(item => item.styleId)
        this.form.mainBusinessList = this.form.mainBusinessList.map(item => item.classificationId)
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async save () {
      if (!this.form.province &&  !this.form.city && !this.form.detailAddress) {
        this.$message.error('请选择并且输入详细地址')
        return
      }
      if (!this.form.manufacturerBusinessLicenseUrl && !this.businessFiles.length) {
        this.$message.error('请上传营业执照！')
        return
      }
      if (!this.form.companyLogoUrl && !this.logoFiles.length) {
        this.$message.error('请上传公司logo！')
        return
      }
      if (!this.form.supplierQualificationList.length && !this.certificateFiles.length) {
        this.$message.error('请上传至少一张其他证书！')
        return
      }
      if (!this.form.personsContactList.length) {
        this.$message.error('请上传填写一个业务信息！')
        return
      } else {
        let mobileReg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
        let mailReg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/
        let personvaild = this.form.personsContactList.every(item => item.name && mobileReg.test(item.mobile) && mailReg.test(item.mail))
        if (!personvaild) {
          this.$message.error('请仔细检查业务信息是否有误！')
          return
        }
      }
      this.$refs.editForm.validate(async (valid) => {
        try {
          if (valid) {
            const loading = this.$loading({
              text: '上传中',
            })
            if (this.businessFiles.length) {
              const businessFile = await this.fileUpload(this.businessFiles[0].raw)
              this.form.manufacturerBusinessLicense = businessFile.fileId
              this.form.manufacturerBusinessLicenseUrl = businessFile.fileUrl
            }
            if (this.logoFiles.length) {
              const logoFile = await this.fileUpload(this.logoFiles[0].raw)
              this.form.companyLogo = logoFile.fileId
              this.form.companyLogoUrl = logoFile.fileUrl
            }
            if (this.certificateFiles.length) {
              let imgs = await Promise.all(this.certificateFiles.map(async (item) => {
                try {
                  const file = await this.fileUpload(item.raw)
                  return { qualificationFileUrl: file.fileUrl, qualificationFileId: file.fileId }
                } catch (err) {
                  console.error('error: ' + JSON.stringify(err))
                }
              }))
              this.form.supplierQualificationList = [...this.form.supplierQualificationList , ...imgs]
            }
            let query = { ...this.form }
            let styleIds = []
            let mainBusinessList = []
            this.styles.forEach(item => {
              query.styleList.forEach(row => {
                if (row === item.styleId) styleIds.push(item)
              })
            })
            this.categorys.forEach(item => {
              query.mainBusinessList.forEach(row => {
                if (row === item.id) mainBusinessList.push({ classificationId: item.id, classificationName: item.name })
              })
            })
            query.styleList = styleIds
            query.mainBusinessList = mainBusinessList
            await this.$axios.post(saveSupplierCompany, {content: { ...query }})
            loading.close()
            this.$router.back()
          } else {
            this.$message.error('请仔细检查信息是否有误！')
          }
        } catch (err) {
          loading.close()
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
  },
  mounted () {
    this.$refs.myQuillEditor.quill.enable(false)
    this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)
    setTimeout(() => {
      this.$refs.myQuillEditor.quill.enable(true)
    }, 1000)
  },
  beforeRouteEnter (to, from, next) {
    next(async vm => {
      await vm.getAddress({ type: 'provinces' })
      await vm.getFirstCategory()
      await vm.getStyles()
      vm.getDetail()
    })
  }
} 
</script>

<style type="text/css" lang="scss">
.upload-demo {
  .el-upload--picture-card {
    width: 96px;
    height: 96px;
    line-height: 1;
    border: none;
  }
  .el-upload-btn-txt {
    margin-top: 15px;
  }
}

</style>

<style lang="scss" scoped>
.edit {
  height: 100%;
}
.edit-warp {
  padding: 0 32px;
}
.edit-container {
  width: 100%;
  padding: 0 24px 40px;
  background: #FFFFFF;
  border-radius: 4px;
  .el-input, .el-select {
    width: 400px;
  }
}
.edit-header {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #CBCBCB;
}
.edit-header-title {
  margin-left: 16px;
  font-size: 16px;
  font-weight: bold;
  color: #363636;
}
.edit-section {
  margin-top: 24px;
}
.edit-section-title {
  font-size: 14px;
  font-weight: bold;
  color: #363636;
}
.edit-section-body {
  position: relative;
  margin-top: 16px;
  padding: 32px 0;
  width: 100%;
  border-radius: 4px;
  background: #F3F3F3;
}
.edit-section-close {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 24px;
  color: #F56C6C;
  cursor: pointer;
  z-index: 9;
}
.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  &:last-child {
    margin-bottom: 0;
  }
  &.form-item-start {
    align-items: flex-start;
  }
}
.form-item-label {
  font-size: 14px;
  color: #363636;
  min-width: 120px;
  text-align: right;
  padding-right: 10px;
  line-height: 32px;
  &.important {
    &:before {
      content: '*';
      margin-right: 3px;
    }
  }
}
.form-item-bd {
  .el-input, .el-select {
    width: 400px;
  }
}
.el-form-address {
  display: flex;
  align-items: center;
  .el-select {
    width: 122px;
    margin-right: 16px;
  }
}
.el-form-address-detail {
  margin-top: 18px;
}
.edit-section-quill {
  padding-left: 24px;
  padding-right: 24px;
  & /deep/ .ql-container {
    min-height: 100px;
    background: #fff;
  }
}
.edit-footer {
  margin-top: 16px;
  width: 100%;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.el-form-info {
  font-size: 14px;
  color: #AFAFAF;
}
.el-form-bd {
  margin-top: 15px;
  display: flex;
}
.el-upload-btn {
  width: 96px;
  height: 96px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #FF2E42;
  .iconfont {
    font-size: 20px;
    font-weight: bold;
  }
  .el-upload-btn-txt {
    font-size: 14px;
  }
}
.el-form-file {
  display: flex;
  align-items: center;
  .el-form-img {
    position: relative;
    width: 96px;
    height: 96px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 16px;
    border-radius: 4px;
    .iconfont {
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(50%, -50%);
    }
  }
}
.el-form-label-important {
  &:before {
    content: '*';
  }
}
.edit-section-handle {
  padding: 24px;
}
</style>
